<main class="dashboard">
    <article class="projects">
        <header class="welcome-banner">
            <h1>Hi alphardex</h1>
            <p>Welcome back to the workspace, we missed You!</p>
        </header>
        <section class="section">
            <div class="search-bar">
                <div class="input-group">
                    <button class="btn"><svg t="1585652817188" class="search" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="1034" width="14" height="14" fill="currentColor">
                            <path
                                d="M888.703059 847.158363 733.373365 691.826622c50.040696-59.650565 80.190367-136.551002 80.190367-220.507136 0-189.613522-153.703661-343.318206-343.31616-343.318206-189.616592 0-343.31923 153.703661-343.31923 343.318206s153.703661 343.318206 343.31923 343.318206c85.053118 0 162.867368-30.94171 222.838228-82.163301l155.141406 155.141406c11.174504 11.17655 29.300326 11.17655 40.47483 0C899.859144 876.440269 899.859144 858.334913 888.703059 847.158363zM470.248595 757.416456c-158.006663 0-286.10004-128.090307-286.10004-286.097994 0-158.006663 128.093377-286.099017 286.10004-286.099017s286.079574 128.093377 286.079574 286.099017C756.32817 629.326149 628.254236 757.416456 470.248595 757.416456z"
                                p-id="1035"></path>
                        </svg></button>
                    <input type="search" class="form-control" name="search" placeholder="Search Task or Project...">
                </div>
            </div>
        </section>
        <section class="section" id="projects">
            <div class="section-title">
                <span class="title">Projects</span>
                <span class="project-count">(13)</span>
            </div>
            <ul class="project-list">
                <li class="project-list__item ripe-malinka">
                    <div class="project-block" data-abbr="GH">
                        <div class="project-abbr">GH</div>
                    </div>
                    <div class="project-name">Green House</div>
                </li>
                <li class="project-list__item itmeo-branding active">
                    <div class="project-block" data-abbr="CP">
                        <div class="project-abbr">CP</div>
                    </div>
                    <div class="project-name">Cyber Punk</div>
                </li>
                <li class="project-list__item mixed-hopes">
                    <div class="project-block" data-badge data-abbr="EC">
                        <div class="project-abbr">EC</div>
                    </div>
                    <div class="project-name">Easy Crypto</div>
                </li>
                <li class="project-list__item fly-high">
                    <div class="project-block" data-abbr="TA">
                        <div class="project-abbr">TA</div>
                    </div>
                    <div class="project-name">Travel App</div>
                </li>
                <li class="project-list__item fruit-blend">
                    <div class="project-block" data-badge data-abbr="LP">
                        <div class="project-abbr">LP
                        </div>
                    </div>
                    <div class="project-name">Landing Page</div>
                </li>
                <li class="project-list__item others">
                    <div class="project-block">
                        <div class="project-abbr">
                            8+</div>
                    </div>
                </li>
            </ul>
        </section>
        <a href="#" class="menu"><svg t="1586009334810" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="3816" width="18" height="18">
                <path d="M199.68 300.032m-49.152 0a4.8 4.8 0 1 0 98.304 0 4.8 4.8 0 1 0-98.304 0Z" p-id="3817">
                </path>
                <path
                    d="M402.432 343.04 829.44 343.04c23.552 0 44.032-19.456 44.032-44.032S852.992 256 829.44 256L402.432 256c-23.552 0-44.032 19.456-44.032 44.032S377.856 343.04 402.432 343.04z"
                    p-id="3818"></path>
                <path d="M199.68 512m-49.152 0a4.8 4.8 0 1 0 98.304 0 4.8 4.8 0 1 0-98.304 0Z" p-id="3819"></path>
                <path
                    d="M829.44 468.992 402.432 468.992c-23.552 0-44.032 19.456-44.032 44.032s19.456 44.032 44.032 44.032L829.44 557.056c23.552 0 44.032-19.456 44.032-44.032S852.992 468.992 829.44 468.992z"
                    p-id="3820"></path>
                <path d="M199.68 724.992m-49.152 0a4.8 4.8 0 1 0 98.304 0 4.8 4.8 0 1 0-98.304 0Z" p-id="3821">
                </path>
                <path
                    d="M829.44 680.96 402.432 680.96c-23.552 0-44.032 19.456-44.032 44.032s19.456 44.032 44.032 44.032L829.44 769.024c23.552 0 44.032-19.456 44.032-44.032S852.992 680.96 829.44 680.96z"
                    p-id="3822"></path>
            </svg></a>
    </article>
    <article class="project-detail">
        <header class="project-header">
            <div class="project-intro">
                <h1>Cyber Punk</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            </div>
            <ul class="avatar-list">
                <li class="avatar-list__item"><img src="https://s.cdpn.io/profiles/user/1256482/80.jpg?1568462706"
                        class="avatar"></li>
                <li class="avatar-list__item"><img src="https://s.cdpn.io/profiles/user/1256482/80.jpg?1568462706"
                        class="avatar"></li>
                <li class="avatar-list__item"><img src="https://s.cdpn.io/profiles/user/1256482/80.jpg?1568462706"
                        class="avatar"></li>
                <li class="avatar-list__item"><a href="#" class="add-user"><svg t="1585986574870" class="icon"
                            viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4622"
                            width="26" height="26">
                            <path
                                d="M515.622 992c-264.676 0-480-215.324-480-480 0-264.654 215.324-480 480-480s480 215.346 480 480c0 264.676-215.324 480-480 480zM515.622 73.738c-241.658 0-438.262 196.604-438.262 438.262s196.604 438.284 438.262 438.284 438.262-196.626 438.262-438.284-196.604-438.262-438.262-438.262zM735.244 530.327c-3.774 3.753-8.967 6.109-14.749 6.109l-408.698 0c-11.542 0-20.88-9.338-20.88-20.88 0-11.52 9.338-20.858 20.858-20.858l408.72 0c11.564-0.022 20.902 9.316 20.88 20.858 0.022 5.782-2.334 10.996-6.131 14.771zM530.371 736.182c-3.774 3.774-9.011 6.109-14.749 6.087-11.564 0.022-20.902-9.338-20.88-20.858l-0.022-418.8c0-11.52 9.338-20.858 20.88-20.858s20.88 9.338 20.858 20.858l0 418.8c0 5.76-2.313 11.018-6.087 14.771z"
                                p-id="4623"></path>
                        </svg></a></li>
            </ul>
        </header>
        <section class="section" id="today">
            <div class="section-title">
                <h3>Today</h3>
                <div class="more"><svg t="1585986433287" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3285" width="16" height="16">
                        <path d="M164.3 512.2m-100 0a100 100 0 1 0 200 0 100 100 0 1 0-200 0Z" p-id="3286"></path>
                        <path d="M512.3 512.2m-100 0a100 100 0 1 0 200 0 100 100 0 1 0-200 0Z" p-id="3287"></path>
                        <path d="M860.4 512.2m-100 0a100 100 0 1 0 200 0 100 100 0 1 0-200 0Z" p-id="3288"></path>
                    </svg></div>
            </div>
            <ul class="task-list">
                <li class="task-list__item">
                    <div class="form-check">
                        <input type="checkbox" name="task1" id="task1" class="form-check-input">
                        <label for="task1" class="form-check-label">Create initial layout for homepage</label>
                    </div>
                    <span class="tag tag-success">Approved</span>
                </li>
                <li class="task-list__item">
                    <div class="form-check">
                        <input type="checkbox" name="task2" id="task2" class="form-check-input">
                        <label for="task2" class="form-check-label">Fixing icons with transparent background</label>
                    </div>
                    <span class="tag tag-info">In Progress</span>
                </li>
                <li class="task-list__item">
                    <div class="form-check">
                        <input type="checkbox" name="task3" id="task3" class="form-check-input">
                        <label for="task3" class="form-check-label">Fixing icons with transparent background</label>
                    </div>
                    <span class="tag tag-info">In Progress</span>
                </li>
                <li class="task-list__item">
                    <div class="form-check">
                        <input type="checkbox" name="task4" id="task4" class="form-check-input">
                        <label for="task4" class="form-check-label">Create initial layout for homepage</label>
                    </div>
                    <span class="tag tag-info">In Progress</span>
                </li>
                <li class="task-list__item">
                    <div class="form-check">
                        <input type="checkbox" name="task5" id="task5" class="form-check-input">
                        <label for="task5" class="form-check-label">Discussions regarding workflow
                            improvement</label>
                    </div>
                    <span class="tag tag-danger">In Review</span>
                </li>
                <li class="task-list__item">
                    <div class="form-check">
                        <input type="checkbox" name="task6" id="task6" class="form-check-input">
                        <label for="task6" class="form-check-label">Create quotation for app redesign
                            project</label>
                    </div>
                    <span class="tag tag-secondary">Waiting</span>
                </li>
            </ul>
        </section>
        <section class="section" id="upcoming">
            <div class="section-title">
                <h3>Upcoming</h3>
                <div class="more">
                    <svg t="1585986433287" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3285" width="16" height="16">
                        <path d="M164.3 512.2m-100 0a100 100 0 1 0 200 0 100 100 0 1 0-200 0Z" p-id="3286"></path>
                        <path d="M512.3 512.2m-100 0a100 100 0 1 0 200 0 100 100 0 1 0-200 0Z" p-id="3287"></path>
                        <path d="M860.4 512.2m-100 0a100 100 0 1 0 200 0 100 100 0 1 0-200 0Z" p-id="3288"></path>
                    </svg>
                </div>
            </div>
            <ul class="task-list">
                <li class="task-list__item">
                    <div class="form-check">
                        <input type="checkbox" name="task7" id="task7" class="form-check-input">
                        <label for="task7" class="form-check-label">Create initial layout for homepage</label>
                    </div>
                    <span class="tag tag-secondary">Waiting</span>
                </li>
                <li class="task-list__item">
                    <div class="form-check">
                        <input type="checkbox" name="task8" id="task8" class="form-check-input">
                        <label for="task8" class="form-check-label">Discussions regarding workflow
                            improvement</label>
                    </div>
                    <span class="tag tag-secondary">Waiting</span>
                </li>
                <li class="task-list__item">
                    <div class="form-check">
                        <input type="checkbox" name="task9" id="task9" class="form-check-input">
                        <label for="task9" class="form-check-label">Fixing icons with transparent background</label>
                    </div>
                    <span class="tag tag-secondary">Waiting</span>
                </li>
            </ul>
            <button class="btn btn-purple add-task"><svg t="1585986770471" class="icon" viewBox="0 0 1024 1024"
                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1232" width="18" height="18">
                    <path
                        d="M970.745 459.367 566.614 459.367 566.614 55.251C566.614 25.842 542.771 2 513.361 2c-29.411 0-53.253 23.841-53.253 53.251l0 404.116L55.975 459.367c-29.411 0-53.253 23.841-53.253 53.25 0 29.41 23.842 53.253 53.253 53.253l404.133 0 0 404.115c0 29.407 23.842 53.249 53.253 53.249 29.41 0 53.253-23.842 53.253-53.249L566.614 565.87l404.131 0c29.413 0 53.255-23.843 53.255-53.253C1024 483.208 1000.158 459.367 970.745 459.367z"
                        p-id="1233"></path>
                </svg></button>
        </section>
    </article>
</main>